<template>
  <view class="container">
    <calculator default-operation="add" @calculated="handleCalculation" />
    
    <view class="result" v-if="calculation">
      <text>计算结果: {{ calculation.num1 }} + {{ calculation.num2 }} = {{ calculation.result }}</text>
    </view>
  </view>
</template>

<script>
import calculator from '@/components/calculator.vue'

export default {
  components: {
    calculator
  },
  data() {
    return {
      calculation: null
    }
  },
  methods: {
    handleCalculation(data) {
      this.calculation = data;
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
}
</style>